import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import './TopNav.css';

interface TopNavProps {
  activeTab?: string;
  setActiveTab?: (tab: string) => void;
}

const TopNav: React.FC<TopNavProps> = () => {
  // Refs for GSAP animations
  const topNavRef = useRef<HTMLElement>(null);
  const navLinksRef = useRef<HTMLAnchorElement[]>([]);

  const navItems = [
    { label: '首页', href: '/' },
    { label: 'AI设计工具', href: '/tools' },
    { label: '设计师社区', href: '/community' },
    { label: '案例库', href: '/gallery' },
    { label: '联系我们', href: '/contact' }
  ];

  // GSAP 入场动画 - 从上往下
  useEffect(() => {
    const tl = gsap.timeline();
    
    // 设置初始状态
    gsap.set(topNavRef.current, { y: -60, opacity: 0 });
    gsap.set(navLinksRef.current, { y: -15, opacity: 0 });

    // 执行动画序列
    tl.to(topNavRef.current, {
      y: 0,
      opacity: 1,
      duration: 0.6,
      ease: "power2.out"
    })
    .to(navLinksRef.current, {
      y: 0,
      opacity: 1,
      duration: 0.4,
      stagger: 0.08,
      ease: "power2.out"
    }, "-=0.3");

    return () => {
      tl.kill();
    };
  }, []);

  return (
    <header ref={topNavRef} className="top-nav">
      <div className="nav-container">
        <div className="nav-left">
          {/* 左侧留空 */}
        </div>
        
        <div className="nav-right">
          <nav className="header-nav">
            {navItems.map((item, index) => (
              <a
                key={item.label}
                ref={(el) => {
                  if (el) navLinksRef.current[index] = el;
                }}
                href={item.href}
                className="nav-link"
              >
                {item.label}
              </a>
            ))}
          </nav>
        </div>
      </div>
    </header>
  );
};

export default TopNav;
